<template>
  <div class="shopbag">
    <div class="plus"></div>
    <van-nav-bar title="购物袋">
      <template #right>
        <div v-if="shopbagData.length > 0" @click="editToggle">{{isEdit ? '完成' : '编辑'}}</div>
      </template>
    </van-nav-bar>
    <div class="shopbag-bg"></div>
    <div class="pro-list">
      <div class="p-list-item" v-for="item in shopbagData" :key="item.sid">
        <!-- <ProList isSlide :proData="item" @simpleSelect="getSimpleSelectStatus" @remove="removeOne(item.sid)"> -->
        <ProList isSlide :proData="item" @remove="removeOne(item.sid)">
          <!-- <template v-slot:checkbox> -->
          <template #checkbox>
            <van-checkbox class="pro-checkbox" v-model="item.checked" checked-color="#ffa341" @change="getSimpleSelectStatus"></van-checkbox>
          </template>
          <van-stepper slot="stepper" @change="changeCount(item)" v-model="item.count" theme="round" button-size="22" disable-input />
        </ProList>
      </div>
    </div>
    <div v-if="shopbagData.length > 0">
      <van-submit-bar v-show="!isEdit" :price="count" button-text="提交订单" button-color="#ffa341" @submit="goSettlement">
        <van-checkbox v-model="allCheck" @click="allSelect">全选</van-checkbox>
      </van-submit-bar>
      <van-submit-bar v-show="isEdit" button-text="删除选择" button-color="#e4393c" @submit="removeSelect">
        <van-checkbox v-model="allCheck" @click="allSelect">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <div v-if="shopbagData.length === 0">
      <van-empty description="购物袋空空如也！" />
    </div>
  </div>
</template>





<script>
import ProList from "@/components/ProList.vue";

export default {
  name: "Shopping",

  data() {
    return {
      // 全选状态
      allCheck: false,
      // 编辑按钮状态
      isEdit: false,
      // 购物袋商品数据
      shopbagData: [],
    };
  },

  // 计算属性
  computed: {
    // 计算被选中商品的合计金额
    count() {
      let total = 0;
      // 遍历找出被选中的商品
      this.shopbagData.forEach((v) => {
        if (v.checked) {
          // 加入总金额
          total += v.count * v.price;
        }
      });
      // 返回总金额(因为vant的订单组件显示金额需要乘以100)
      return total * 100;
    },
  },

  components: {
    // 注册商品列表组件
    ProList,
  },

  created() {
    // 设置导航栏当前索引值
    this.$util.setSessionItem("tabbarActive", 2);

    // 获取商品数据
    this.getShopbagData();
  },

  methods: {
    // 切换编辑状态
    editToggle() {
      this.isEdit = !this.isEdit;
    },

    // 获取用户购物袋商品数据
    getShopbagData() {
      // 获取token
      let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "get",
        url: "/findAllShopcart",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          // 
          if (res.data.code == 700) {
            this.$toast("请先登录");
            // 清除token
            this.$cookies.remove("TOKEN");
            // 延迟2秒后跳转到登录页面
            let timer = setTimeout(() => {
              clearTimeout(timer);
              this.$router.replace({ name: "Login" });
            }, 2000);
            return;
          }
          if (res.data.code === 5000) {
            // 给每个商品数据添加一个选中状态属性
            res.data.result.forEach((v) => {
              v.checked = false;
            });
            this.shopbagData = res.data.result;
          }
        })
        .catch((err) => {
          
        });
    },

    // 全选商品
    allSelect() {
      // 遍历设置所有商品的选中状态
      this.shopbagData.forEach((v) => {
        v.checked = this.allCheck;
      });
    },

    // 获取单选框的状态
    getSimpleSelectStatus() {
      for (let i = 0; i < this.shopbagData.length; i++) {
        // 如果有一个商品没有选中全选状态为false
        if (!this.shopbagData[i].checked) {
          this.allCheck = false;
          return;
        }
      }
      // 全选状态为true
      this.allCheck = true;
    },

    // 修改商品数量
    changeCount(item) {
      // 获取token
      let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "post",
        url: "/modifyShopcartCount",
        data: {
          tokenString,
          sid: item.sid,
          count: item.count,
        },
      })
        .then((res) => {
          // 
          if (res.data.code == 700) {
            this.$toast("请先登录");
            // 清除token
            this.$cookies.remove("TOKEN");
            // 延迟2秒后跳转到登录页面
            let timer = setTimeout(() => {
              clearTimeout(timer);
              this.$router.replace({ name: "Login" });
            }, 2000);
            return;
          }
        })
        .catch((err) => {
          
        });
    },

    // 删除商品(单个删除和多个删除)
    removeShopbagData(sids) {
      // 获取token
      let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "post",
        url: "/deleteShopcart",
        data: {
          tokenString,
          sids,
        },
      })
        .then((res) => {
          // 
          if (res.data.code == 700) {
            this.$toast("请先登录");
            // 清除token
            this.$cookies.remove("TOKEN");
            // 延迟2秒后跳转到登录页面
            let timer = setTimeout(() => {
              clearTimeout(timer);
              this.$router.replace({ name: "Login" });
            }, 2000);
            return;
          }
          this.$toast(res.data.msg);
          if (res.data.code === 7000) {
            // 将参数转数据格式
            let sidsData = JSON.parse(sids);
            // 循环遍历每个商品的sid
            for (let i = 0; i < this.shopbagData.length; i++) {
              let sid = this.shopbagData[i].sid;
              // 如果该商品被删除
              if (sidsData.indexOf(sid) > -1) {
                // 则也在本地数据中删除
                this.shopbagData.splice(i, 1);
                // 因为商品被移除,所以索引值要退回一个
                i--;
              }
            }
            // 需要重新判断是否全选
            this.getSimpleSelectStatus();
            // 重新查询商品数量
            this.getShopbagData();
            // 关闭删除
            this.isEdit = false;
          }
        })
        .catch((err) => {
          
        });
    },

    // 单个删除(调用删除方法,只传递一个数据就行了)
    removeOne(sid) {
      let sids = JSON.stringify([sid]);
      
      this.removeShopbagData(sids);
    },

    // 删除选择(删除多个)
    removeSelect() {
      // 获取勾选的商品
      let sids = [];
      // 循环处理好被删除的数据sid
      this.shopbagData.forEach((v) => {
        if (v.checked) {
          sids.push(v.sid);
        }
      });
      // 
      // 如果未选择则终止删除请求
      if (sids.length === 0) {
        this.$toast("请选择删除的商品");
        return;
      }
      // 转换sid格式为字符串
      sids = JSON.stringify(sids);
      // 执行删除方法
      this.removeShopbagData(sids);
    },

    // 提交订单
    goSettlement() {
      // 获取勾选的商品
      let sids = [];
      // 循环处理好被勾选的数据的sid
      this.shopbagData.forEach((v) => {
        if (v.checked) {
          sids.push(v.sid);
        }
      });
      // 如果未选择则终止删除请求
      if (sids.length === 0) {
        this.$toast("请选择购买的商品");
        return;
      }
      // 将订单sid数组进行格式化处理，并跳转至订单页面
      this.$router.push({
        name: "Settlement",
        query: { sids: sids.join("-") },
      });
    },
  },
};
</script>





<style lang="less" scoped>
.van-nav-bar {
  /deep/.van-nav-bar__right {
    color: #ffa341;
  }
}
/deep/.van-submit-bar {
  bottom: 50px;
}
/deep/.van-checkbox__icon--checked .van-icon {
  background-color: #ffa341;
  border-color: #ffa341;
}
/deep/.van-submit-bar__button {
  margin-left: auto;
}

.shopbag {
  // padding-top: 46px;
  padding-bottom: 110px;

  .pro-checkbox {
    width: 21px;
    height: 20px;
  }

  .p-list-item {
    padding: 10px 10px 0;
    border-radius: 10px;
  }

  .shopbag-bg {
    height: 60px;
    background: url("../assets/images/shopbag_bg.png") no-repeat center center;
    background-size: cover;
  }
}
</style>
